<template>
    <div class="join_dispach" v-wechat-title="$route.meta.title">
        <div class="banner">
            <div class="shadow">
                <span class="tit">请选择小二哥干活</span>
                <span class="dec">现在加入最高享3万元运营补贴！</span>
                <!-- <span class="tel">合作：400-880-6604</span> -->
            </div>
        </div>
        <div class="floor_1">
            <span class="tit">为什么要成为劳务派遣合作伙伴</span>
            <div class="card_box">
                <div class="card">
                    <div class="tit">
                        <img src="../../assets/image/join/worker/icon_1.png" alt="">
                        <span>市场前景广阔</span>
                    </div>
                    <span class="dec">我国目前蓝领人群大约4亿人：农民工2.74亿，制造业蓝领1亿人，建筑业蓝领5000-8000万，服务业蓝领1.2亿。<br>目前蓝领换工作的频次为每年3次左右，而招聘淡季的人均利润在300-500之间，旺季最高可达4000-8000元，淡旺季综合平均利润在1000-1500元。<br>蓝领招聘市场成为万亿级别的巨大市场。</span>
                </div>
                <div class="card">
                    <div class="tit">
                        <img src="../../assets/image/join/worker/icon_2.png" alt="">
                        <span>政府单位、企业都需要劳务派遣</span>
                    </div>
                    <span class="dec">中石化加油工、银行大堂人员、医院临时护工、各地辅警，政务大厅等工作人员，大部分都是劳务派遣的。富士康，歌尔声学等企业，也都需要大量的劳务派遣工，而且利润非常丰厚。</span>
                </div>

            </div>
            <div class="card_box">
                <div class="card">
                    <div class="tit">
                        <img src="../../assets/image/join/worker/icon_1.png" alt="">
                        <span>国家政策好</span>
                    </div>
                    <span class="dec">就业是最大的民生，要坚持就业优先战略和积极就业政策，实现更高质量和更充分就业。</span>
                    <span class="dec" style="text-align:right;">——《第十九次全国代表大会的报告》</span>
                </div>
                <div class="card">
                    <div class="tit">
                        <img src="../../assets/image/join/worker/icon_2.png" alt="">
                        <span>劳务派遣资质办理</span>
                    </div>
                    <span class="dec">注册营业执照难度大，且注册资金需200万-1000万，才有申请劳务派遣的资质。</span>
                </div>

            </div>
        </div>
        <div class="floor_2">
            <div class="box">
                <div class="item">
                    <span class="tit">顺风顺势</span>
                    <span class="dec">契合市场发展方向<br>政策保驾护航</span>
                </div>
                <div class="item">
                    <span class="tit">颠覆传统</span>
                    <span class="dec">摒弃传统招工模式<br>开启行业创新</span>
                </div>
                <div class="item">
                    <span class="tit">以质取胜</span>
                    <span class="dec">高质量雇工雇主<br>流程严格把控</span>
                </div>
                <div class="item">
                    <span class="tit">邀您同行</span>
                    <span class="dec">轻松找活<br>小二哥与您同行</span>
                </div>
            </div>
        </div>
        <div class="floor_3">
            <span class="tit">平台优势</span>
            <div class="box">
                <div class="left">
                    <span class="tit">
                        小二哥干活自2017年开始立项研发<br>
                        截止2020年10月<br>
                        招商合作数量 <em>200+</em><br>
                        覆盖全国<em>14个</em>省级行政区，<em>90个</em>地级行政区
                    </span>
                    <span class="tit">一台手机就是一个劳务市场，工人永不流失，永远属于你！</span>
                </div>
                <div class="right">
                    <img src="../../assets/image/join/dispach/map.png" alt="">
                </div>
            </div>
        </div>
        <div class="floor_4"></div>
        <div class="floor_5">
            <span class="title">合作伙伴</span>
            <span class="dec">超过5万次合作，为一百余家全球知名企业实现用工配套无缝对接</span>
            <img src="@/assets/image/logo_group.png" alt="">
        </div>
    </div>
</template>

<script>
export default {
    name: 'Dispach'
}
</script>

<style lang="less" scoped>
.join_dispach {
    width: 1920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;

    .banner {
        width: 100%;
        height: 500px;
        background: url('../../assets/image/join/dispach/banner.png');
        background-size: 100% 100%;
        position: relative;

        .shadow {
            position: absolute;
            bottom: 0;
            left: 129px;
            width: 755px;
            height: 362px;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 30px 30px 0px 0px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            letter-spacing: 2px;
            color: #FFFFFF;

            .tit {
                font-size: 40px;
                margin: 65px 0 0 61px;
            }

            .dec {
                font-size: 24px;
                margin: 20px 20px 0 61px;
                line-height: 30px;
                font-weight: 300;
                margin-bottom: auto;
            }

            .tel {
                font-size: 30px;
                margin: 0 0 65px 61px;
            }
        }
    }

    .floor_1 {
        width: calc(100% - 165px * 2);
        padding: 134px 165px 178px 165px;
        display: flex;
        flex-direction: column;

        .tit {
            font-size: 40px;
            display: block;
            margin-bottom: 70px;
        }

        .card_box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 28px;

            .card {
                width: 734px;
                height: 290px;
                background: #FFFFFF;
                box-shadow: 6px 0px 12px rgba(186, 186, 186, 0.25);
                position: relative;
                display: flex;
                flex-direction: column;

                &::before {
                    position: absolute;
                    left: 0;
                    top: 0;
                    content: '';
                    display: inline-block;
                    height: 100%;
                    width: 18px;
                    background: linear-gradient(180deg, rgba(255, 245, 0, 0.6) 0%, rgba(255, 168, 0, 0.6) 100%);
                }

                .tit {
                    font-size: 30px;
                    margin: 49px 0 40px 42px;
                    display: flex;
                    align-items: center;

                    img {
                        height: 32px;
                        width: 28px;
                        margin-right: 16px;
                    }
                }

                .dec {
                    font-size: 18px;
                    line-height: 27px;
                    margin-left: 42px;
                    margin-right: 42px;
                }

                &:last-child {
                    img {
                        height: 24px;
                        width: 32px;
                    }
                }
            }
        }

        .img_ls {
            display: flex;
            align-items: center;
            justify-content: space-between;

            img {
                height: 171px;
                width: 313px;
            }
        }
    }

    .floor_2 {
        width: 100%;
        height: 200px;
        background: url('../../assets/image/join/worker/floor_2.png');
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .box {
            height: 100%;
            width: auto;
            margin: 0 auto;
            overflow: hidden;
            display: flex;
            align-items: center;

            .item {
                width: 400px;
                height: 129px;
                color: #fff;
                border-right: 1px solid #fff;

                &:last-child {
                    border: 0;
                }

                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;

                .tit {
                    font-size: 30px;
                    color: #FFCF00;
                }

                .dec {
                    font-size: 16px;
                    line-height: 24px;
                    display: flex;
                    align-items: center;
                    text-align: center;
                    color: #FFFFFF;
                }
            }
        }
    }

    .floor_3 {
        height: calc(760px - 69px - 90px);
        width: calc(100% - 150px * 2);
        padding: 69px 150px 90px 150px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .tit {
            font-size: 40px;
            line-height: 60px;
            display: flex;
            align-items: center;
            letter-spacing: 2px;
            color: #1F1F1F;
            margin-bottom: 73px;
        }

        .box {
            flex: 1;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .left {
                flex: 1;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .tit {
                    font-size: 30px;
                    line-height: 60px;
                    letter-spacing: 2px;
                    color: #1F1F1F;
                    margin: 0;
                    display: block;

                    em {
                        color: #1890FF;
                        display: inline;
                    }
                }

                .dec {
                    font-size: 18px;
                    line-height: 24px;
                    color: #666666;
                    margin: 0;
                }
            }

            .right {
                width: 676.96px;
                display: flex;
                justify-content: center;
                align-items: center;

                img {
                    width: 705px;
                    height: 499px;
                }
            }
        }
    }

    .floor_4 {
        width: 100%;
        height: 960px;
        background: url('../../assets/image/join/worker/floor_4.png');
        background-size: 100% 100%;
    }

    .floor_5 {
        width: 100%;
        height: 760px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
            font-weight: 500;
            font-size: 40px;
            display: inline-block;
            margin: 129px auto 20px auto;
        }

        .dec {
            font-size: 22px;
            color: #999999;
            margin: 0 auto 47px auto;
        }

        img {
            width: 1480px;
            height: 391px;
            margin: 0 auto;
        }
    }
}</style>